<template>
	<view class="page">
		<view class="logo" :style="'height:' + touHeight + 'px'"><image :src="URL+'/JD_wx_img/logo.png'" mode="widthFix"></image></view>
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<view class="page_content" :style="'padding-top:' + touHeight + 'px'">
			<!-- 首页定位和搜索 -->
			<view class="location_search">
				<view class="city_box" @tap="toCityList">
					<view>{{cityName}}</view>
				</view>
				<form class="search_box" :class="{'active':onFocus==1}">
					<input name="keywords" @blur="bindblur" @tap="searchOn" value="" @confirm="toSearch" @input="onInput" placeholder-class="phcolor" placeholder="在这里搜索"/>
					<view class="form_btn" @tap="togangwei"></view>
				</form>
			</view>
			<!-- 内容区背景图 -->
			<view class="page_bg" :style="'top:' + touHeight + 'px'"><image :src="URL+'/JD_wx_img/pageTop_bg02.png'" mode="widthFix"></image></view>
			<!-- 首页轮播 -->
			<swiper class="swiper" indicator-dots="true" easing-function="linear" autoplay="true" interval="4000" duration="500" circular='true'>
			    <swiper-item  hover-class='none' open-type="redirect" v-for="item in swiper" :key="index">
			        <image :src="item.image" mode="widthFix"/>
			    </swiper-item>
			</swiper>
			
			<!-- 兼职日历 -->
			<view class="job_content">
				<view class="job_title"><image :src="URL+'/JD_wx_img/job_rili_img.png'" mode="widthFix"></image>兼职日历</view>
				<view class="job_list_fu">
					<view class="job_list" v-for="item in jianzhiList" :key="index" :data-nyr="item.job_date" :data-nian="item.year" :data-yue="item.month" :data-ri="item.today" :data-week="item.week"  @tap="goTochange">
						<view class="job_box">
							<view class="job_top">
								<view class="month">{{item.month}}月</view>
								<view class="week" :class="{'today':item.is_today==true}">{{item.is_today==true?'今天':item.week}}</view>
							</view>
							<view class="job_bottom">
								<view class="day"><view class="bold">{{item.today}}</view>日</view>
								<view class="xinxi"><view class="bold">{{item.jobs}}</view>个兼职</view>
							</view>
						</view>
					</view>
					<view class="job_list">
						<view class="job_box more" @tap="openPop">更多日期</view>
					</view>
					<view class="clear"></view>
				</view>
			</view>
		</view>
		<!-- 公共导航部分 -->
		<view class="tarbar">
			<view class="nav_link on_cor" @click="gotoIndex">
				<view class="icon icon_1"></view>
				<text class="text">首页</text>
			</view>
			<view class="nav_link" @click="gotoMy">
				<view class="icon icon_2"></view>
				<text class="text">我的</text>
			</view>
		</view>
		<!-- end -->
		<!-- 日历选择弹窗 -->
		<view class="popup_bg" :class="{'active':calendar==1}"  @tap="closePop"></view>
		<view class="calendar_popup" :class="{'active':calendar==1}">
			<view class="close_pop" @tap="closePop"></view>
			<uni-calendar :insert="true" :lunar="true" :start-date="'2019-3-2'" :end-date="'3000-5-20'" @change="change" @to-click="toClick"></uni-calendar>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js";
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		components: {
			uniCalendar
		},
		data() {
			return{
				touHeight: 0,
				//域名拼接
				URL: app.globalData.URL,
				cityName: app.globalData.CityName,
				swiper:[],
				calendar: 2,
				onFocus: 0,
				jianzhiList: [],//兼职列表
				token: uni.getStorageSync('token'),
				XuYaoXianShiTanChuangMe : app.globalData.XuYaoXianShiTanChuangMe
			}
		},
		
		onLoad(){
			let that = this
			//轮播图接口
			uni.request({
				url: app.globalData.URL + '/api/v1/Content/indexBanner',
				method: "get",
				success: function (res) { that.swiper = res.data.data}
			})
		},
		
		onShow(){
			var that= this
			
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			// 获取有没有顺延的订单
			if(that.XuYaoXianShiTanChuangMe){
				uni.request({
					url: app.globalData.URL + '/api/v1/User/kanKanYouMeiYouYunYanDeDingDan',
					method: "get",
					header: {
						"token" : uni.getStorageSync('token')
					},
					success: function (res) {
						if(res.data.code === 1){
							uni.showModal({
								showCancel:false,
								content: '您有一个订单被酒店顺延，请到‘我的工作订单’进行查看！',
								success: () => {
									that.XuYaoXianShiTanChuangMe = false
									app.globalData.XuYaoXianShiTanChuangMe = false
								}
							})
						}
					}
				})
			}

			// 判断有没有切换城市
			if(app.globalData.chageCity){
				//城市定位
				that.cityName = app.globalData.cityName
				//首页兼职列表
				uni.request({
					url: app.globalData.URL + '/api/v1/Job/indexJob?city=' + that.cityName,
					method: "get",
					success: function (res) {
						that.jianzhiList = res.data.data
					}
				})
			}else{
				//城市定位
				uni.authorize({
					// 获取用户定位信息 
					scope: "scope.userLocation",
					// 用户同意授权执行
					success(){
						// 引入腾讯地图api
						// 实例化API核心类
						var qqmapsdk = new QQMapWX({
							// 填写自己的Key值，这个值是与AppID绑定的
							key: 'HBABZ-XSB6G-3IJQ3-ITFD5-7NDTZ-O2FEO'
						 });
						//获取位置信息
						uni.getLocation({
							type: 'gcj02',
							success: function (res) {
								// 逆地址解析方法
								qqmapsdk.reverseGeocoder({
									success(res) {
										// 取到用户的定位城市，赋值传递出去
										that.cityName = res.result.address_component.city
										uni.setStorageSync('address',res.result.formatted_addresses.recommend)
										//首页兼职列表
										uni.request({
											url: app.globalData.URL + '/api/v1/Job/indexJob?city=' + that.cityName,
											method: "get",
											success: function (res) {
												that.jianzhiList = res.data.data
											}
										})
									}
								})	
							}
						})
					},
					// 若用户不同意授权，弹框提示
					fail(res){
						uni.showToast({
							icon :"none",
							title: '注意：需要获取您的定位授权,否则部分功能将无法使用',
							duration: 2000
						})
					}
				})
			}
		},
		
		methods: {
			// 页面底部跳转
			gotoIndex:function(){
				uni.redirectTo({
				    url: '/pages/index/index',
				});
			},
			
			gotoMy:function(){
				if(!uni.getStorageSync('token')){
					wx.showModal({
						title: '提示',
						content: '请先登录后再查看',
						showCancel: false,
						confirmColor:'#E85426',
						success (res) {
							if (res.confirm) {
								wx.navigateTo({
								    url: '/pages/sign_in/sign_in',
								})
							}
						}
					})			
				}else{
					uni.redirectTo({
					    url: '/pages/user_my_center/user_my_center',
					});
				}
			},
			//end
			
			//时间选择跳转到岗位列表
			change:function(e){
				var that = this;
				var fulldate = e.fulldate;//年月日
				var year = e.lunar.cYear;//年
				var month = e.lunar.cMonth;//月
				var date = e.lunar.cDay;//日
				var week = e.lunar.ncWeek;//星期
				var city = that.cityName;//城市
				uni.navigateTo({
				    url: '/pages/job_list/job_list?fulldate='+fulldate+'&year='+year+'&month='+month+'&date='+date+'&week='+week+'&city='+city,
				})
			},
			
			//跳转到列表并传值
			goTochange:function(e){
				var that = this;
				var fulldate = e.currentTarget.dataset.nyr;//年月日
				var year = e.currentTarget.dataset.nian;//年
				var month = e.currentTarget.dataset.yue;//月
				var date = e.currentTarget.dataset.ri;//日
				var week = e.currentTarget.dataset.week;//星期
				var city = that.cityName;//城市
				uni.navigateTo({
				    url: '/pages/job_list/job_list?fulldate='+fulldate+'&year='+year+'&month='+month+'&date='+date+'&week='+week+'&city='+city,
				})
			},
			
			//展开弹窗
			openPop:function(){
				var that = this;
				that.calendar = 1
			},
			
			//关闭弹窗
			closePop:function(){
				var that = this;
				that.calendar = 2
			},
			
			// 触发input
			searchOn:function(){
			  var that = this;
			  that.onFocus = 1;
			},
			
			// 离开input
			bindblur:function(){
				var that = this;
				that.onFocus = 0;
			},
		    
			//搜索框实时监控
			onInput:function(e){
				var that = this;
				that.value = e.detail.value;
			},
			
			//回车提交搜索
			toSearch:function(e){
				var that = this;
				var value = that.value
				var city = that.cityName;//城市
				if(value==''){
					uni.showModal({
						title: '提示',
						content: '搜索内容不能为空',
						showCancel: false,
						confirmColor:'#E85426',
					})		
				}else{
					uni.navigateTo({
					    url: '/pages/search/search?value='+value+'&city='+city,
					})
				}
			},
			
			//带内容跳转搜索页面
			togangwei:function(e){
				var that = this;
				var value = that.value
				var city = that.cityName;//城市
				if(value==''){
					uni.showModal({
						title: '提示',
						content: '搜索内容不能为空',
						showCancel: false,
						confirmColor:'#E85426',
					})
				}else{
					uni.navigateTo({
					    url: '/pages/search/search?value='+value+'&city='+city,
					})
				}
			},
			
			// 切换城市
			toCityList:function(e){
				uni.navigateTo({
					url:'/pages/chos_city/index'
				})
			}
		}
	}
</script>

<style>
	/* 搜索提示文字颜色 */
	.phcolor{
		color: #fff;
	}
	.logo{
		position: fixed;
		left: 0px;
		width: 100%;
		font-size: 0px;
		z-index: 6;
	}
	.logo image{
		width: 200rpx;
		position: absolute;
		bottom: 0px;
		left: 30rpx;
	}
	.location_search{
		overflow: hidden;
		padding-top: 15rpx;
		position: relative;
		z-index: 3;
	}
	.location_search .city_box{
		float: left;
		text-align: center;
		z-index: 20;
		box-sizing: border-box;
		padding: 0px 10rpx;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/city_img.png) left center no-repeat;
		background-size: 48rpx 48rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		padding-left: 56rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	.location_search .search_box{
		border-radius: 16rpx;
		margin-left: 195rpx;
		position: relative;
		overflow: hidden;
		display: block;
	}
	.location_search .search_box input{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-left: 100rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #111;
		box-shadow: 0px 8rpx 20rpx rgba(169, 63, 28, 0.1);
		font-size: 28rpx;
		background: rgba(255, 255, 255, 0.3);
		padding-right: 30rpx;
		-webkit-transition: all 0.2s ease-out;
		-khtml-transition: all 0.2s ease-out;
		-moz-transition: all 0.2s ease-out;
		-o-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
	}
	.location_search .search_box.active input{
		background: rgba(255, 255, 255);
	}
	.location_search .search_box .form_btn{
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/search_img.png) center center no-repeat;
		background-size: 48rpx 48rpx;
		width: 95rpx;
		height: 80rpx;
		position: absolute;
		left: 0px;
		top: 0px;
	}
	.location_search .search_box.active .form_btn{
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/search_img2.png) center center no-repeat;
		background-size: 48rpx 48rpx;
	}
	.page_content .swiper{
		height: 280rpx;
		font-size: 0px;
		overflow: hidden;
		box-shadow: 0px 16rpx 30rpx -10rpx rgba(169, 63, 28, 0.1);
		border-radius: 16rpx;
		margin-top: 32rpx;
	}
	.page_content .swiper image{
		display: block;
		width: 100%;
		border-radius: 16rpx;
	}
	/* 设置点点的层级 ,可以调整小点的位置*/
	.swiper .wx-swiper-dots.wx-swiper-dots-horizontal{
	  position: absolute;
	  width: 100%;
	  text-align: center;
	}
	/*设置点点的样式*/
	.swiper .wx-swiper-dot{
	  width: 20rpx;
	  height: 20rpx;
	  margin: 0px 10rpx;
	  display: inline-flex;
	}
	.swiper .wx-swiper-dot::before{
	  content:'';
	  flex-grow: 1;
	  background: #fff;
	  border-radius: 5px;
	}
	/* 当前点点的样式 */
	.swiper .wx-swiper-dot-active{
	    width: 40rpx;
	}
	.swiper .wx-swiper-dot-active::before{
	    background: #E85426;
	}
	.job_content{
		margin-top: 60rpx;
	}
	.job_content .job_title{
		font-weight: 900;
		font-size: 34rpx;
		color: #333333;
		text-align: center;
	}
	.job_content .job_title image{
		width: 48rpx;
		height: 48rpx;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		top: -5rpx;
		margin-right: 16rpx;
	}
	.job_list_fu{
		margin: 0px -10rpx;
		margin-top: 13rpx;
	}
	.job_list_fu .job_list{
		float: left;
		width: 50%;
		box-sizing: border-box;
		padding: 10rpx;
	}
	.job_list_fu .job_box{
		box-sizing: border-box;
		background: #fff url(https://jianzhi.huanyuweizhi.com/JD_wx_img/job_list_bg.png) center center no-repeat;
		background-size: cover!important;
		border-radius: 0px 32rpx 0px 32rpx;
		padding: 32rpx;
		padding-bottom: 25rpx;
		box-shadow: 0px 8rpx 20rpx rgba(169, 63, 28, 0.1);
		height: 165rpx;
	}
	.job_list_fu .job_list .job_box.more{
		line-height: 165rpx;
		padding: 0px;
		text-align: center;
		font-weight: 900;
		font-size: 34rpx;
		color: #333333;
	}
	.job_list_fu .job_list .job_box.more::after{
		content: '';
		display: inline-block;
		width: 48rpx;
		height: 48rpx;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/more_img.png) center center no-repeat;
		background-size: 48rpx 48rpx;
		vertical-align: middle;
		position: relative;
		top: -5rpx;
		margin-left: 16rpx;
	}
	.job_list_fu .job_top{
		overflow: hidden;
		line-height: 36rpx;
		height: 36rpx;
	}
	.job_list_fu .job_top .month{
		float: left;
		color: #888;
		font-size: 24rpx;
	}
	.job_list_fu .job_top .week{
		float: right;
		color: #888;
		font-size: 20rpx;
	}
	.job_list_fu .job_top .week.today{
		width: 60rpx;
		text-align: center;
		background: #E85426;
		border-radius: 18rpx;
		color: #fff;
		font-size: 20rpx;
	}
	.job_list_fu .job_bottom{
		overflow: hidden;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 15rpx;
	}
	.job_list_fu .job_bottom .day{
		color: #333;
		float: left;
		font-size: 24rpx;
	}
	.job_list_fu .job_bottom .day .bold{
		font-weight: 900;
		font-size: 56rpx;
		display: inline-block;
		margin-right: 5rpx;
	}
	.job_list_fu .job_bottom .xinxi{
		float: right;
		color: #888;
		font-size: 24rpx;
		line-height: 80rpx;
		padding-right: 25rpx;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/sanjiao_img.png) right -10rpx center no-repeat;
		background-size: 32rpx 32rpx;
	}
	.job_list_fu .job_bottom .xinxi .bold{
		display: inline-block;
		color: #E85426;
		font-weight: bold;
	}
	.job_list_fu .job_bottom .xinxi image{
		width: 32rpx;
		display: inline-block;
		vertical-align: middle;
	}
</style>
